<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 
	<script src="https://minedata.cn/minemapapi/v1.4/minemap.js"></script>
	 <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.0.0/minemap.css">

   
    <style>
      body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
	
</style>
</header>
<body>
<style>
    #fit {
        display: block;
        position: relative;
        margin: 0px auto;
        width: 50%;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
    }
</style>
<div id='map'></div>
<br/>
<button id='fit'>隐藏</button>


<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '4013';

var myjson = {}

const map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/4013',
    center: [118.8386378, 37.0313616],
    zoom: 10,
    bearing: 0,
    pitch: 45,
});


map.on('load', function () {
	
	 

    map.addLayer({
        "id": "points",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["http://localhost:8004/test/pbf/{z}/{x}/{y}"]
        },
        "source-layer": "position",
        "paint": {
            "circle-radius":1,
            "circle-color":[
                            "match",
                            ["get","id"],
                            1,"#fbb03b",
                            2,"#223b53",
                            3,"#e55e5e",
                            4,"#3bb2d0",
                            "#ccc"
                            ]
        }
    });
    
    
    document.getElementById('fit').addEventListener('click', function() {
        if (document.getElementById('fit').innerHTML =="隐藏"){
        	
        	map.setLayoutProperty("points","visibility","none")
        	
        	document.getElementById('fit').innerHTML = "显示"
        }else{
        	map.setLayoutProperty("points","visibility","visible")
        	document.getElementById('fit').innerHTML = "隐藏"
        }
    });

});
 
</script>   
</body>
</html>